<script>
    import {defineProps} from 'vue'

    export default{
        // 父子传值02：声明属性
        // 这儿有坑，注意场景。
        // 坑1.如果是在setup函数中，是这样的，需要在选项式api中同vue2一样定义
        // （https://cn.vuejs.org/api/composition-api-setup.html#accessing-props）。
        //  
        props:['title','data'],

        // 坑2.如果是在 <script setup> 的单文件组件中，需要本用 defineProps()来定义props
        // https://cn.vuejs.org/guide/components/props.html

        // 坑3.如果使用了 ts,如 <script setup lang="ts">,可以使用类型标注来声明 props
        /*
            defineProps<{
                title?: string
                likes?: number
            }>()
        */
        
        // 我们彩的是第1个，在setup函数中。学习vue3,就是要注意这一点儿，一个用法，
        // 在setup 函数、 <script setup>单文件组件、使用TS后可能略有不同。哪就参数API进行查找。
        // API: https://cn.vuejs.org/api/
        // TS: https://cn.vuejs.org/guide/typescript/overview.html

        emits:['revice-data'], 
        //vue3 中，需要显示的声明emits选项，同样的，有坑。
        // https://cn.vuejs.org/guide/components/events.html
        // 1.用 setup函数的话，就定义emits选项
        // 2.用 <script setup>单文件组件,就需要用 defineEmits(['revice-data', 'submit'])
        // 3.用 ts的话，还可使用指定类型
        /*
           const emit = defineEmits({
            submit(payload: { email: string, password: string }) {
                // 通过返回值为 `true` 还是为 `false` 来判断
                // 验证是否通过
            }
        */

        // setup函数，响应式api入口
        setup(props,context){
            // 父子传值04：可以通过props取到值
            console.log(props)

            const sendData = (data)=>{
                context.emit("revice-data",data)
            }

            return {
                //...
                sendData
            }
        }
    }
</script>

<template>
    <!-- 父子传值03：在页面中使用 -->
    <h3>{{title}}</h3>
    <!-- <ol>
        <li>你好，幻影</li>
        <li>你好，幻影</li>
        <li>你好，幻影</li>
    </ol> -->
    <ol>
        <li v-for="(v,k) in data" :key="'list_'+k">{{v}}</li>
    </ol>
    <hr>
    <h3>子组与父组件通信</h3>
    <button @click="sendData(Math.random())">向父组件发送数据</button>

</template>

<style>

</style>